<!--
  ~ Copyright 2022 Scheer PAS Schweiz AG
  ~
  ~  Licensed under the Apache License, Version 2.0 (the "License");
  ~  you may not use this file except in compliance with the License.
  ~  You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~  Unless required by applicable law or agreed to in writing, software
  ~  distributed under the License is distributed on an "AS IS" BASIS,
  ~  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~  See the License for the specific language governing permissions and
  ~  imitations under the License.
  -->

<div class="table-actions">
  <div [class.primary]="activeSection === sections.unread">
    <button mat-button (click)="setActiveSection(sections.unread)">
      {{ 'NOTIFICATION.STATUS.UNREAD' | translate }}
    </button>
  </div>
  <div [class.primary]="activeSection === sections.read">
    <button mat-button (click)="setActiveSection(sections.read)">
      {{ 'NOTIFICATION.STATUS.READ' | translate }}
    </button>
  </div>
  <div [class.primary]="activeSection === sections.all">
    <button mat-button (click)="setActiveSection(sections.all)">
      {{ 'NOTIFICATION.STATUS.ALL' | translate }}
    </button>
  </div>
</div>

<table
  *ngIf="
    notifications.length > 0 && !loadingSpinnerService.waiting;
    else no_notifications
  "
  mat-table
  [dataSource]="dataSource">
  <ng-container matColumnDef="category">
    <th mat-header-cell *matHeaderCellDef>
      {{ 'NOTIFICATION.COLUMN_TITLE.CATEGORY' | translate }}
    </th>
    <td mat-cell *matCellDef="let notification">
      {{ mapNotificationCategory(notification.category) }}
    </td>
  </ng-container>
  <ng-container matColumnDef="message">
    <th mat-header-cell *matHeaderCellDef>
      {{ 'NOTIFICATION.COLUMN_TITLE.MESSAGE' | translate }}
    </th>
    <td mat-cell *matCellDef="let notification">
      <span
        class="notifications-message"
        (click)="redirect(notification)"
        [innerHTML]="mapNotificationMessage(notification)"></span>
    </td>
  </ng-container>
  <ng-container matColumnDef="date">
    <th mat-header-cell *matHeaderCellDef>
      {{ 'NOTIFICATION.COLUMN_TITLE.DATE' | translate }}
    </th>
    <td
      mat-cell
      *matCellDef="let notification"
      [matTooltip]="convertTooltipTimestamp(notification.createdOn)">
      {{ convertTimestamp(notification.createdOn) }}
    </td>
  </ng-container>
  <ng-container matColumnDef="action">
    <th mat-header-cell *matHeaderCellDef>
      {{ 'NOTIFICATION.COLUMN_TITLE.ACTION' | translate }}
    </th>
    <td mat-cell *matCellDef="let notification">
      <button
        *ngIf="notification.status === 'OPEN'"
        mat-icon-button
        class="notifications-actions"
        color="primary"
        (click)="markNotificationAsRead(notification.id)">
        <mat-icon>done</mat-icon>
      </button>
    </td>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
<ng-template #no_notifications>
  <div *ngIf="!loadingSpinnerService.waiting" class="no-data-wrapper">
    <app-no-data
      [text]="'NOTIFICATION.NO_DATA' | translate"
      [textClass]="'text-big2'">
    </app-no-data>
  </div>
</ng-template>
